<template>
  <div id="app">
    <div class="wrap">
      <h1>任务计划列表</h1>
      <div>
        <label for="add">添加任务：</label>
        <input type="text" id="add" v-model="todo" @keyup.enter="addTodo">
      </div>
      <ul>
        <li>{{noCheckedLength}}个任务未完成</li>
        <li class="action">
          <a href="#all" class="active">{{list.length}}所有任务</a>
          <a href="#unfinished">{{noCheckedLength}}未完成的任务</a>
          <a href="#finished">{{CheckedLength}}完成的任务</a>
        </li>
      </ul>
      <h3 class="big-title">任务列表：</h3>
      <div class="tasks">
        <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
        <ul class="todo-list">
          <li class="todo"
              :class="{completed:item.isChecked,editing: item === edtorTodos}"
              v-for="(item,index) in filteredList" :key="item.title">
            <div class="view">
              <input type="checkbox" class="toggle" v-model="item.isChecked" :checked="item.isChecked">
              <label @dblclick="edtorTodo(item)">{{item.title}}</label>
              <button class="destroy" @click="deleteTodo(index)">删除</button>
            </div>
            <input
               v-foucs="edtorTodos === item"
               type="text" class="edit"
               v-model="item.title"
               @blur="editored"
               @keyup.13="editored"
               @keyup.esc="cancelTodo(item)"/>
          </li>
        </ul>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
// list: [{title: '', isChecked: false, edtorTodos: '' }]
var store = {
  save (key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  fetch (key) {
    return JSON.parse(localStorage.getItem(key)) || []
  }
}
var list = store.fetch('m-new-class')
var vm = null
function watchHashChange () {
  var hash = window.location.hash.slice(1)
  vm.visibility = hash
  console.log('visibility', vm.visibility)
}

export default {
  name: 'app',
  comments: {},
  data () {
    return {
      todo: '', // 输入框的值
      list: list,
      edtorTodos: '', // 记录编辑信息
      beforeTitle: '', // 记录正在编辑的数据的title
      visibility: 'all' // 通过这个属性值的变化对数据进行刷选
    }
  },
  created: function () {
    vm = this
    console.log('1', vm)
    watchHashChange()
  },
  watch: {
    // list: function () { // 监控list这个属性，当这个属性对应的值发生变化就会执行函数
    //   store.save('m-new-class', this.list)
    // }
    list: {
      handler: function () {
        store.save('m-new-class', this.list)
      },
      deep: true
    }
  },
  computed: {
    noCheckedLength: function () {
      return this.list.filter(function (item) {
        return !item.isChecked
      }).length
    },
    CheckedLength: function () {
      return this.list.filter(function (item) {
        return item.isChecked
      }).length
    },
    filteredList: function () {
      // 过滤的时候有三种情况 all finished unfinished
      var filter = {
        all: function (list) {
          return list
        },
        finished: function (list) {
          return list.filter(function (item) {
            return item.isChecked
          })
        },
        unfinished: function (list) {
          return list.filter(function (item) {
            return !item.isChecked
          })
        }
      }
      console.log('this.visibility', this.visibility)
      return filter[this.visibility] ? filter[this.visibility](list) : list
    }
  },
  methods: {
    addTodo () { // 添加任务
      this.list.push({
        title: this.todo,
        isChecked: false
      })
      this.todo = ''
    },
    deleteTodo (index) { // 删除
      this.list.splice(index, 1)
    },
    edtorTodo (todo) { // 编辑任务
      // 编辑任务的时候，记录一下编辑这条任务的title，方便取消时候使用
      this.beforeTitle = todo.title
      this.edtorTodos = todo
    },
    editored () { // 编辑完成隐藏输入框
      this.edtorTodos = -1
    },
    cancelTodo (todo) { // 取消编辑任务
      todo.title = this.beforeTitle
      this.edtorTodos = -1
    }
  },
  directives: { // 自定义指令
    foucs: {
      update (el, binding) {
        console.log(el, binding)
        if (binding.value) {
          el.focus()
        }
      }
    }
  }
}
window.addEventListener('hashchange', watchHashChange)
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  .wrap {
    width: 1200px;
    margin:auto;
    text-align: center;
  }
  .completed {
    text-decoration: line-through;
  }
  .edit {
    display: none;
    margin: auto;
  }
  .editing {
    .edit {
      display: block;
    }
  }
  .action a {
    padding-right: 10px;
  }
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
